import { useEffect } from "react";
import {
  Table,
  Card,
  Breadcrumb,
  Input,
  Space,
  Button,
  message,
  Select,
  ConfigProvider,
} from "antd";
import zh_CN from "antd/es/locale/zh_CN";
import { useHistory } from "react-router-dom";
import { useNavs } from "../../hook/navs";
import navsApi from "../../api/navs.js";
const { Search } = Input;
const { Option } = Select;
//显示一共多少条数据
function showTotal(total) {
  return `共 ${total} 条数据`;
}

// eslint-disable-next-line
export default () => {
  let history = useHistory();
  let [{ rows }, { getAllNavs }] = useNavs();
  // console.log(rows);

    //删除商品大类
    const deleteNav = async (e) => {
      if (e.target.nodeName === "SPAN") {
        let delId =
          e.target.parentNode.parentNode.parentNode.children[0].textContent;
        const data = await navsApi.delNav(delId);
        if (data.deletedCount) {
          // 删除成功后再次获取后台数据
          getAllNavs();
          message.success({
            content: "删除商品大类成功成功",
            duration: 0.5,
            onClose: () => {
              history.push("/info/navs");
            },
          });
        }
      }
      return;
    };
    //修改商品大类的数据
    const changeNav = async (e) => {
      if (e.target.nodeName === "SPAN") {
        let changeNavId =
          e.target.parentNode.parentNode.parentNode.children[0].textContent;
        history.push(`/info/changeNav/${changeNavId}`);
      }
      return;
    };

  //useEffect传一个数组准确的值
  useEffect(() => {
    getAllNavs();
  }, [getAllNavs]);
  const columns = [
    {
      title: "id",
      dataIndex: "_id",
      align: "center",
    },
    {
      title: "导航大类名称",
      dataIndex: "name",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      render: () => (
        <>
          <Button
            type="primary"
            shape="round"
            style={{ marginRight: "5px" }}
            onClick={changeNav}
          >
            修改
          </Button>
          <Button
            type="primary"
            shape="round"
            danger
              onClick={deleteNav}
          >
            删除
          </Button>
        </>
      ),
    },
  ];
  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>商品分类</Breadcrumb.Item>
            <Breadcrumb.Item>商品大类</Breadcrumb.Item>
          </Breadcrumb>
 
        </Card>
        <Card>
          <ConfigProvider ConfigProvider locale={zh_CN}>
            <Table
              columns={columns}
              dataSource={rows}
              rowKey={(record) => record._id}
              pagination={{
                // total,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal,
                pageSizeOptions: [5, 10, 20, 50],
                defaultPageSize: 5,
                // onChange: (page, pageSize) => {
                //   setCouCurPage(page);
                //   setCouEachPage(pageSize);
                // },
              }}
            />
          </ConfigProvider>
        </Card>
      </Space>
    </div>
  );
};
